<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="HandheldFriendly" content="true"/>
    <title></title>
    <script type="text/javascript" src="js/rem.js"></script>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		
    </script>
    <style type="text/css">
        *{margin:0;padding:0;}
        /*首页内容*/
        .container{
            position:relative;
            height:1080px;
            width:100%;
            max-width:640px;
            margin:0 auto;
            overflow:hidden;
            
        }
        .header{
            width:6.4rem;
            height:0.88rem;
            /*box-shadow:0 0 1px 0 #d6d7cc;*/
            background: #04b1b1;
            line-height:0.88rem;
            overflow:hidden;
            text-align:center;
            position:fixed;
            z-index:999;
        }
        .fangdajing{
            background-image:url("images/shezhi.png");
            background-size:100% 100%;
            height:0.44rem;
            width:0.44rem;
            /*display:inline-block;*/
            float:left;
            top:0.22rem;
            position:relative;
            left:0.22rem;
        }
        .ren{
            background-image:url("images/fangdajing.png");
            background-size:100% 100%;
            height:0.44rem;
            width:0.44rem;
            /*display:inline-block;*/
            float:right;
            top:0.22rem;
            position:relative;
            right:0.22rem;
        }

        p{
            font-size:0.3rem;
            font-weight:bold;
            margin:0 auto;
            color:#fff;
            /*margin-right:0.22rem;*/
        }
        .roll_box{
            overflow:hidden;
            height:2.5rem;
            width:6.4rem;
            margin:0 auto;
            box-shadow:0 2px 2px 1px #d6d7cc;
            /*top:0.88rem;*/
            /*position:relative;*/
        }
        .content_box{
            height:2.5rem;
            left:-6.4rem;
            position:absolute;
            transition:all 0.5s;
        }
        .content_box1{
            height:2.5rem;
            left:-6.4rem;
            position:absolute;
        }
        .box{
            float:left;
            height:2.5rem;
            width:6.4rem;
        }
        .box1 img{
            height:100%;
            width:100%;
        }
        .box2 img{
            height:100%;
            width:100%;
        }
        .box3 img{
            height:100%;
            width:100%;
        }
        .maincontent{
            position:relative;
            top:0.88rem;
        }
        .maincontent_box{
            width:100%;
            height:100%;
            /*position:relative;*/
        }
        body{
            background: #efefef;
            overflow:scroll;
            -webkit-overflow-scrolling: touch;
        }
        .maincontent_box ul{
            width:6rem;
            height:100%;
            margin:0 auto;
        }
        .list{
            width:6rem;
            height:3rem;
            margin-top:0.15rem;
        }
        .list_content{
            width:2.9rem;
            height:3rem;
            box-shadow:0 0 1px 1px #dfe4e4;
            border-radius:0.1rem;
            float:left;
            background: #fbfff8;
            position:relative;
        }
        .list_content1{
            width:2.9rem;
            height:3rem;
            box-shadow:0 0 1px 1px #d6d7cc;
            border-radius:0.1rem;
            float:right;
            background: #fbfff8;
            position:relative;
        }
        .foot{
            height:0.98rem;
            width:6.4rem;
            position:fixed;
            /*top:8.62rem;*/
            background:#04b1b1;
            bottom:0;
            z-index: 99999999;
        }
        /*.login_box{*/
            /*height:100%;*/
            /*width:100%;*/
            /*background: rgba(0, 0, 0, 0.49);*/
            /*!*display:none;*!*/
            /*position:relative;*/
            /*z-index:9999999;*/
            /*overflow:hidden;*/
        /*}*/
        /*.login{*/
            /*width:4rem;*/
            /*height:5rem;*/
            /*background:#fff;*/
            /*margin-top:3rem;*/
            /*margin-left:1.2rem;*/
            /*border-radius:0.2rem;*/
            /*box-shadow:0 0 2px 0 #d7d1c3;*/
        /*}*/
        .nav_menu{
            background-size:100% 100%;
            height:0.55rem;
            width:0.55rem;
            /*display:inline-block;*/
            /*top:0.22rem;*/
            /*right:0.22rem;*/
            margin:0 auto;
            /*overflow:hidden;*/
        }
        .nav_menu2 {
            background-size:100% 100%;
            height:0.42rem;
            width:0.42rem;
            margin:0.06rem auto;
            /*padding-top:0.2rem;*/
        }
        .nav_menu4 {
            background-size:100% 100%;
            height:0.43rem;
            width:0.43rem;
            margin:0.06rem auto;
        }
        .nav_menu5 {
            background-size:100% 100%;
            height:0.48rem;
            width:0.48rem;
            margin:0.036rem auto;
        }
        .icon1{
            background-image:url("images/shijian1.png");
        }
        .icon2{
            background-image:url("images/shoucang.png");
        }
        .icon3{
            background-image:url("images/jintou.png");
        }
        .icon4{
            background-image:url("images/bianji.png");
        }
        .icon5{
            background-image:url("images/shiquan.png");
        }
        ul,li{
            list-style-type:none;
        }
        .word{
            font-size:0.16rem;
            color:#fff;
            margin:0 auto;
            padding-top:0.02rem;
            text-align:center;
        }
        .icon_box{
            height:0.86rem;
            width:0.55rem;
            margin:0 0.35rem;
        }
        .iconbox {
            margin: 0 auto;
            width:6rem;
            height:0.8rem;
            display:flex;
            display: -webkit-flex;
            justify-content:center;
            padding-top:0.1rem;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .photo{
            height:0.5rem;
            width:0.5rem;
            background:#fa7d3c;
            position:absolute;
            border-radius:100rem;
            top:0.25rem;
            left:0.15rem;
            border:0.03rem solid #fff;
            z-index:20;
        }
        .video{
            width:100%;
            /*height:2rem;*/
            top:0.5rem;
            background:#DD2727;
            height:2rem;
            /*border-radius:0 0 0.1rem 0.1rem;*/
            position:absolute;
        }
        .username{
            margin-left:0.75rem;
            font-size:0.12rem;
            /*position:absolute;*/
            /*z-index:50;*/
            color: #ababab;
            width:1rem;
            display:block;
            margin-top:0.25rem;
        }
        .day{
            /*width:0.8rem;*/
            font-size:0.2rem;
            right:0.1rem;
            color:#000;
            top:0.15rem;
            position:absolute;
            /*z-index:50;*/
        }
        .xiangqing{
            width:2.5rem;
            color: #ababab;
            font-size:0.12rem;
            position:absolute;
            top:2.6rem;
            left:0.2rem;
        }
        .video1{
            background-image:url("images/content1.jpeg");
            background-size:100%;
        }
        .video2{
            background-image:url("images/content2.png");
            background-size:100%;
        }
        .video3{
            background-image:url("images/content3.png");
            background-size:100%;
        }
        .video4{
            background-image:url("images/content4.png");
            background-size:100%;
        }
        .photo1{
            background-image:url("images/photo1.jpeg");
            background-size:100%;
        }
        .photo2{
            background-image:url("images/photo2.jpeg");
            background-size:100%;
        }
        .photo3{
            background-image:url("images/photo3.jpeg");
            background-size:100%;
        }
        .photo4{
            background-image:url("images/photo4.png");
            background-size:100%;
        }
        .bigen{
            position:absolute;
            height:0.8rem;
            width:0.8rem;
            background-image:url("images/bigen.png");
            left:1.05rem;
            top:1.1rem;
            z-index:88;
            background-size:100% 100%;
        }
        .bigen1{
            position:absolute;
            height:0.8rem;
            width:0.8rem;
            background-image:url("images/bigen.png");
            right:1.05rem;
            top:1.1rem;
            z-index:88;
            background-size:100% 100%;
        }
        .login{

        }
    </style>
</head>
<body>
	<div id="container1" class="container">
    <div class="header">
        <div class="fangdajing"></div>
        <a class="login" ><div class="ren" id="ren_content"></div></a>
        <p>时圈</p>
    </div>
    <!--<div class="login_box">-->
        <!--<div class="login"></div>-->
    <!--</div>-->
    <div class="maincontent">
    <div class="roll_box" id="seebox">
        <div class="content_box" id="bigbox">
            <div class="box box3"><img src="images/tu3.png"></div>
            <div class="box box1"><img src="images/tu1.jpeg"></div>
            <div class="box box2"><img src="images/tu2.jpeg"></div>
            <div class="box box3"><img src="images/tu3.png"></div>
            <div class="box box1"><img src="images/tu1.jpeg"></div>
        </div>
    </div>
    <div class="maincontent_box">
        <ul>
            <li class="list">
                <div class="list_content">
                    <div class="bigen"></div>
                    <p class="username">微笑的冰欺凌</p>
                    <p class="day">265天</p>
                    <div class="photo photo1"></div>
                    <div class="video video1"></div>
                    <p class="xiangqing">来到长沙以后,每一天都在努力,让生活变得更好</p>
                </div>
                <div class="list_content1">
                    <div class="list_content">
                        <div class="bigen1"></div>
                        <p class="username">好多鱼额</p>
                        <p class="day">143天</p>
                        <div class="photo photo2"></div>
                        <div class="video video2"></div>
                        <p class="xiangqing">我和狗狗的时光是最快乐的!</p>
                    </div>
                </div>
            </li>
            <li class="list">
                <div class="list_content">
                    <div class="bigen"></div>
                    <p class="username">人生如初见</p>
                    <p class="day">25天</p>
                    <div class="photo photo3"></div>
                    <div class="video video3"></div>
                    <p class="xiangqing">每天都要开开心心的~</p>
                </div>
                <div class="list_content1">
                    <div class="bigen"></div>
                    <p class="username">我就是黑土大坏人</p>
                    <p class="day">83天</p>
                    <div class="photo photo4"></div>
                    <div class="video video4"></div>
                    <p class="xiangqing">好多美食,我就是吃货,每天吃吃吃!</p>
                </div>
            </li>
            <li class="list">
                <div class="list_content">
                	<div class="bigen"></div>
                    <p class="username">人生如初见</p>
                    <p class="day">25天</p>
                    <div class="photo photo3"></div>
                    <div class="video video3"></div>
                    <p class="xiangqing">每天都要开开心心的~</p>
                </div>
                <div class="list_content1">
                	<div class="bigen"></div>
                    <p class="username">我就是黑土大坏人</p>
                    <p class="day">83天</p>
                    <div class="photo photo4"></div>
                    <div class="video video4"></div>
                    <p class="xiangqing">好多美食,我就是吃货,每天吃吃吃!</p>
                </div>
            </li>
            <li class="list">
                <div class="list_content">
                	<div class="bigen"></div>
                    <p class="username">人生如初见</p>
                    <p class="day">25天</p>
                    <div class="photo photo3"></div>
                    <div class="video video3"></div>
                    <p class="xiangqing">每天都要开开心心的~</p>
                </div>
                <div class="list_content1">
                	<div class="bigen"></div>
                    <p class="username">我就是黑土大坏人</p>
                    <p class="day">83天</p>
                    <div class="photo photo4"></div>
                    <div class="video video4"></div>
                    <p class="xiangqing">好多美食,我就是吃货,每天吃吃吃!</p>
                </div>
            </li>
        </ul>
    </div>
    </div>
    <div class="foot">
        <div class="iconbox">
            <div class="icon_box">
                 <div class="nav_menu icon1"></div>
                <div class="word">时光集</div>
            </div>
            <div class="icon_box">
                 <div class="nav_menu2 icon2"></div>
                <div class="word">收藏</div>
            </div>
            <div class="icon_box">
                 <div class="nav_menu icon3"></div>
                <div class="word">记时光</div>
            </div>
            <div class="icon_box">
                 <div class="nav_menu4 icon4"></div>
                <div class="word">编辑</div>
            </div>
            <div class="icon_box">
                 <div class="nav_menu5 icon5"></div>
                <div class="word">时圈</div>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="js/roll.js" ></script>
</html>